<template>
  <div>
    <el-table :data="articleList" style="width: 100%" :row-class-name="tableRowClassName">
      
        <el-table-column prop="title" label="标题" width="180">
      </el-table-column>
      <el-table-column prop="userId" label="作者" width="180">
      </el-table-column>
      <el-table-column prop="categoryId" label="分类">
      </el-table-column>
      <el-table-column prop="content" label="摘要">
      </el-table-column>
      <el-table-column prop="original" label="原创/转载">
          <template slot-scope="scope">
            <span>{{scope.row.original}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="creatType" label="创建方式">
      </el-table-column>
      <el-table-column prop="createdTime" label="创建时间">
      </el-table-column>
      <el-table-column prop="updatedTime" label="更新时间">
      </el-table-column>
      <el-table-column prop="updatedBy" label="最后修改">
      </el-table-column>
      <el-table-column label="操作">
        <el-button type="primary">预览</el-button>
        <el-button type="primary">修改</el-button>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>


</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

</style>

<script>
import articleApi from '@/api/article/article'
import { resetRouter } from '@/router';
  export default {
    mounted(){
      this.getArticleList();
      console.log(articleApi)
    },
    methods: {
      /**
       * 动态改变表格样式
       */
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      /**
       * 获取文章列表
       */
      getArticleList(){
        articleApi.getArticleList().then((res)=>{
            console.log(res);
        });
      }
    },
    data() {
      return {
        articleList: [{
          id: "1",
          userId: "1",
          categoryId: "1",
          content: "1",
          original: true,
          creatType: 1,
          status: 1,
          createdTime: "2022-01-19T16:27:42",
          updatedTime: "2022-01-19T16:27:45",
          updatedBy: "1",
          title: "readme",
          deleted: false
        }]
      }
    }
  }

</script>
